<!-- 编辑、添加表单组件 -->
<template>
  <el-dialog
    :title="handleType=='add'?'添加' + addFormData.title:'修改' + addFormData.title"
    :visible.sync="showAddForm"
    width="600px"
  >
    <el-form :model="updateData" ref="form" :rules="rules" label-width="180px">
      <el-form-item
        v-for="item in addFormData.formData"
        :label="item.title"
        v-bind:key="item.title"
      >
        <component
          :is="item.componentType"
          v-model="updateData[item.tableColumn]"
          :placeholder="item.placeholder"
          clearable
          size="mini"
          :options="item.optionValue"
          :props="{value: 'code',label: 'name',children: 'children', checkStrictly: true, expandTrigger: 'hover' }"
          value-format="yyyy-MM-dd"
        >
          <div v-if="item.componentType=='el-select'">
            <el-option
              v-for="dict in item.optionValue"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </div>
          <div v-if="item.componentType=='el-radio-group'">
            <el-radio
              v-for="dict in item.optionValue"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </div>
        </component>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  <!-- </div> -->
</template>
<script>
export default {
  name: 'dynamicAddForm',
  props: {
    ifWidth: {
      type: String,
      default: '100%',
    },
    addFormData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    handleType: {
      type: String,
      default: '',
    },
    updateData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  components: {},
  data() {
    return {
      showAddForm: false,
      form: {},
      rules: {},
    }
  },
  mounted() {},
  watch: {
    show: {
      handler(newValue, oldValue) {},
      deep: true,
    },
    addFormData(newValue, oldValue) {
      //表单数据
      deep: true
    },
  },
  created() {},
  methods: {
    //显示弹窗
    showDialog() {
      this.showAddForm = true
    },
    cancel() {
      this.showAddForm = false
    },
    submitForm: function () {
      console.log('点击确定')
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.updateData)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input {
  width: 200px;
}
</style>
